@extends('admin.layout.base')
@section('styles')
    <style>
        .el-icon-plus{
            cursor: pointer;
            font-size: 28px;
            color: #8c939d;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            text-align: center;
        }
        .img-uploader{
            border: 1px dashed #d9d9d9;
            display: block;
        }
        .site_logo-img,.site_logo-uploader-icon{
            width: 200px;
            height: 80px;
            line-height: 80px;
        }
        .wap_logo-img,.wap_logo-uploader-icon{
            width: 100px;
            height: 50px;
            line-height: 50px;
        }
        .default_avatar-img,.default_avatar-uploader-icon{
            width: 80px;
            height: 80px;
            line-height: 80px;
            border-radius: 50%;
        }
        .login_logo-img,.login_logo-uploader-icon {
            width: 210px;
            height: 140px;
            line-height: 50px;
        }

    </style>
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-info">
            <el-tabs type="card">
                <el-tab-pane>
                    <span slot="label"><i class="fa fa-cog"></i>基础设置</span>
                    <el-form :model="formBase" class="form" ref="formBase" label-width="150px">
                        <div class="panel-header"><div class="panel-title">基本设置</div></div>
                        <div class="panel-main">
                            <el-form-item label="网站名称：" prop="site_name">
                                <el-input clearable v-model="formBase.site_name" placeholder="网站名称"></el-input>
                            </el-form-item>
                            
                            <el-form-item label="手机端LOGO：" prop="wap_logo">
                                <el-upload
                                        :action="upload_image"
                                        :show-file-list="false"
                                        name="image"
                                        :limit="1"
                                        :on-success="uploadWapLogoSuccess"
                                        :before-upload="uploadBefore">
                                    <img v-if="formBase.wap_logo" :src="formBase.wap_logo" class="img-uploader wap_logo-img">
                                    <i v-else class="el-icon-plus wap_logo-uploader-icon"></i>
                                    <div slot="tip" class="el-upload__tip">图片大小不能超过 2MB，建议尺寸3:2!</div>
                                </el-upload>
                            </el-form-item>
                        </div>
                        
                        <div class="panel-header"><div class="panel-title">百分百比设置</div></div>
                        <div class="panel-main">
                            <el-form-item label="赏金猎人任务金额百分比（%）：" prop="price_rate">
                                <el-input type="num" clearable v-model="formBase.price_rate" placeholder="赏金猎人任务金额百分比（%）"></el-input>
                            </el-form-item>
                            
                            <el-form-item label="任务平台抽成百分比（%）：" prop="pt_rate">
                                <el-input type="num" clearable v-model="formBase.pt_rate" placeholder="任务平台抽成百分比（%）"></el-input>
                            </el-form-item>
                                                   
                             <el-form-item label="团长抽成百分比（%）：" prop="captain_rate">
                                <el-input type="num" clearable v-model="formBase.captain_rate" placeholder="团长抽成比百分比（%）"></el-input>
                            </el-form-item>
                             <el-form-item label="提现手续费（%）：" prop="tx_rate">
                                <el-input type="num" clearable v-model="formBase.tx_rate" placeholder="提现手续费（%）"></el-input>
                            </el-form-item>
                        </div>
                        
                        
                        <div class="panel-header"><div class="panel-title">其他设置</div></div>
                        <div class="panel-main">
                           <el-form-item label="新人红包金额：" prop="new_money">
                                <el-input clearable type="num" v-model="formBase.new_money" placeholder="新人红包金额"></el-input>
                            </el-form-item>
                           
                            
                            <!-- <el-form-item label="平台客服电话：" prop="customer_mobile">
                                <el-input clearable v-model="formBase.customer_mobile" placeholder="平台电话"></el-input>
                            </el-form-item>
                            <el-form-item label="平台客服QQ：" prop="customer_qq">
                                <el-input clearable v-model="formBase.customer_qq" placeholder="平台客服QQ"></el-input>
                            </el-form-item> -->
                        </div>
                     
                        <el-form-item style="padding-left: 150px;margin-top: 50px">
                            <el-button type="primary" @click="update('formBase')">保存提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                
                <el-tab-pane>
                    <span slot="label"><i class="fa fa-server"></i> 三方服务</span>
                    <el-form :model="formService" class="form" ref="formService" label-width="100px">
                        
                       
                        <div class="panel-header"><div class="panel-title">阿里云短信</div></div>
                        <div class="panel-main">
                            <el-form-item label="KeyId：" prop="aliyun_sms_ak">
                                <el-input clearable v-model="formService.aliyun_sms_ak" placeholder="阿里短信服务AccessKeyId"></el-input>
                            </el-form-item>
                            <el-form-item label="KeySecret：" prop="aliyun_sms_as">
                                <el-input clearable v-model="formService.aliyun_sms_as" placeholder="阿里短信服务AccessKeySecret"></el-input>
                            </el-form-item>
                            <el-form-item label="SignName：" prop="aliyun_sms_sign_name">
                                <el-input clearable v-model="formService.aliyun_sms_sign_name" placeholder="阿里云短信服务签名"></el-input>
                            </el-form-item>
                        </div>
                       
                        <div class="panel-header"><div class="panel-title">小程序</div></div>
                        <div class="panel-main">
                            <el-form-item label="AppId：" prop="mini_app_id">
                                <el-input clearable v-model="formService.mini_app_id" placeholder="小程序AppId"></el-input>
                            </el-form-item>
                            <el-form-item label="AppSecret：" prop="mini_app_token">
                                <el-input clearable v-model="formService.mini_app_secret" placeholder="小程序AppSecret"></el-input>
                            </el-form-item>
                            <el-form-item label="Token：" prop="mini_app_token">
                                <el-input clearable v-model="formService.mini_app_token" placeholder="小程序Token"></el-input>
                            </el-form-item>
                            <el-form-item label="AesKey：" prop="mini_app_aeskey">
                                <el-input clearable v-model="formService.mini_app_aeskey" placeholder="小程序AesKey"></el-input>
                            </el-form-item>
                        </div>
                        <el-form-item style="padding-left: 150px;margin-top: 50px">
                            <el-button type="primary" @click="update('formService')">保存提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    bases: {!! $base !!},
                   
                    upload_image: UPLOAD_IMAGE,
                    services: {!! $service !!},
                    formBase: null,
                    formIntegral: null,
                    formService: null,
                }
            },

            created(){
                this.formBase = {
                    type: 'base',
                    site_name: this.bases.site_name,//网站名称
                    
                    wap_logo: this.bases.wap_logo,//手机端logo
                    price_rate: this.bases.price_rate, //任务完成佣金比例
                    pt_rate: this.bases.pt_rate, //任务完成平台佣金比例
                    captain_rate: this.bases.captain_rate, //任务完成平台佣金比例
                    tx_rate: this.bases.tx_rate, //任务完成平台佣金比例
                    new_money:this.bases.new_money //新人红包金额
                };
                
                this.formService = {
                    type: 'service',
                    
                    //阿里云短信
                    aliyun_sms_ak: this.services.aliyun_sms_ak,
                    aliyun_sms_as: this.services.aliyun_sms_as,
                    aliyun_sms_sign_name: this.services.aliyun_sms_sign_name,
                   
                    //小程序
                    mini_app_id: this.services.mini_app_id,
                    mini_app_token: this.services.mini_app_token,
                    mini_app_token: this.services.mini_app_token,
                    mini_app_aeskey: this.services.mini_app_aeskey,
                };
            },
            methods: {
                uploadSiteLogoSuccess(res) {
                    this.formBase.site_logo = res.data.path;
                },
                uploadWapLogoSuccess(res){
                    this.formBase.wap_logo = res.data.path;
                },
                uploadDefaultAvatarSuccess(res){
                    this.formBase.default_avatar = res.data.path;
                },
                uploadLoginLogoSuccess(res){
                    this.formBase.login_logo = res.data.path;
                },
                uploadBefore(file) {
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isLt2M) {
                        this.$message.error('图片大小不能超过 2MB!');
                    }
                    return isLt2M;
                },
                //更新
                update(name){
                    let that = this,formData;
                    switch (name) {
                        case 'formBase':
                            formData = this.formBase;
                            break;
                        
                        case 'formService':
                            formData = this.formService;
                            break;
                    }
                    formData._token = "{{csrf_token()}}";
                    $.post("{{ route('admin.config.update') }}",formData,function (res) {
                        if(res.code){
                            that.$message.error(res.msg);
                        }else{
                            that.$message({
                                type: 'success',
                                duration: '1000',
                                message: res.msg,
                            });
                        }
                    },'JSON');
                },
            }
        });
    </script>
@endsection
